<script setup lang="ts">
import { ref,inject } from "vue";
import { Codemirror } from "vue-codemirror";
import { xml } from "@codemirror/lang-xml";
import { oneDark } from "@codemirror/theme-one-dark";

const code = ref(
        `
  <xml>
  </xml>
`
      )
const extensions = [xml(), oneDark];
const browserFormPost_url = ref("");
const encoded_cxml = ref("");
const handleSubmit = () => {
  // if (browserFormPost_url.value.trim() == ''){
  //   alert('没有接到puchout setup request');
  // }
  console.log(code.value);
  encoded_cxml.value = encodeURI(code.value)
  console.log(encoded_cxml.value);
};
const $http = inject('$http')
const init = ()=>{
  //@ts-ignore
  $http.get('/api/bpurl').then((res:any)=>{
    browserFormPost_url.value = res.data
  })
}
init();
</script>
<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content ep-bg-purple-dark">
        <label>Browser Form Post url: {{ browserFormPost_url }}</label>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content ep-bg-purple-dark">
        <div class="box">
    <Codemirror
      class="code"
      v-model="code"
      :style="{ height: '100%',width: '100%' }"
      :extensions="extensions"
      :autofocus="true"
      :disabled="false"
    />
  </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content ep-bg-purple-dark">
        <form action="" method="post" id="p2b">
          <input type="hidden" name="cxml-urlencoded" v-model="encoded_cxml"/>
          <button @click="handleSubmit()">提交</button>
        </form>
      </div>
      
    </el-col>
  </el-row>
</template>

<style scoped>
</style>
